<template>
  <tree :data="data" />
  <div class="rightContent d-flex">
    <div class="icons">
      <div
        v-for="(item, index) in data.crops"
        :key="index"
        class="iconInfo d-flex ai-center"
      >
        <div
          :class="[
            'icon',
            `bg-color-${item.background}`,
            `bd-color-${item.background}`,
          ]"
        ></div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div>
      <div class="chart">
        <div class="d-flex ai-center mb-4">
          <div class="chartTitle">地块详情</div>
        </div>
        <div class="mb-4">
          <div class="d-flex ai-center mb-3">
            <div class="font-lan-m">当前地块：</div>
            <div class="number-l">ID-00373</div>
            <div class="d-flex ml-auto">
              <img :src="locationIcon" alt="" class="mr-2" />
              <div class="font-lan">江西南昌</div>
            </div>
          </div>
          <div>
            <el-row :gutter="16">
              <el-col :span="12" class="mt-2">
                <div class="d-flex">
                  <img :src="user" alt="" class="mr-2" />
                  <div>
                    <p class="description">种植户：</p>
                    <p class="font-lan">张三李四</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="mt-2">
                <div class="d-flex">
                  <img :src="organization" alt="" class="mr-2" />
                  <div>
                    <p class="description">组设：</p>
                    <p class="font-lan">五组合作社</p>
                  </div>
                </div></el-col
              >
              <el-col :span="12" class="mt-2">
                <div class="d-flex">
                  <img :src="area_2" alt="" class="mr-2" />
                  <div>
                    <p class="description">面积：</p>
                    <p class="font-lan">235亩</p>
                  </div>
                </div></el-col
              >
              <el-col :span="12" class="mt-2">
                <div class="d-flex">
                  <img :src="phone" alt="" class="mr-2" />
                  <div>
                    <p class="description">联系电话：</p>
                    <p class="font-lan">131 1234 5678</p>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
        <div>
          <div class="d-flex ai-center mb-3">
            <div class="font-lan-m">当前种植品种：</div>
            <div class="font-lan-l">青贮3号</div>
            <div class="d-flex ml-auto">
              <div class="chartSelect d-flex ai-center">
                <p class="font-num mr-2">种植品种历史</p>
                <div class="arrowD"></div>
              </div>
            </div>
          </div>
          <div>
            <el-row :gutter="32">
              <el-col :span="4" v-for="(index) in 6" :key="index" class="text-center">
                <div class="plantItem bg-blue-1 mb-2"><p class="font-lan">籽粒</p></div>
                <div class="plantItem bg-blue-2 mb-2"><p class="font-lan">品种{{index}}</p></div>
                <div class="plantItem bg-blue-3 mb-3"><p class="font-lan">早熟</p></div>
                <div>{{2017+index}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import tree from "@/components/tree/tree.vue";
export default defineComponent({
  components: {
    tree,
  },
  setup() {
    //变量
    const reduce = require("@/assets/img/reduce.png");
    const pointIcon = require("@/assets/img/pointIcon.png");
    const appUpdate = require("@/assets/img/appUpdate.png");
    const locationIcon = require("@/assets/img/locationIcon.png");
    const user = require("@/assets/img/user.png");
    const organization = require("@/assets/img/organization.png");
    const area_2 = require("@/assets/img/area_2.png");
    const phone = require("@/assets/img/phone.png");
    const data = reactive({
      select: "玉米播种类型",
      list: [
        {
          name: "按用途",
          children: [
            {
              name: "籽粒玉米",
            },
            {
              name: "青贮玉米",
            },
            {
              name: "鲜食玉米",
            },
          ],
        },
        {
          name: "按品种特性",
          children: [
            {
              name: "耐密性",
            },
            {
              name: "抗干旱",
            },
            {
              name: "抗病虫",
            },
          ],
        },
        {
          name: "按成熟期",
          children: [
            {
              name: "早熟",
            },
            {
              name: "中熟",
            },
            {
              name: "晚熟",
            },
          ],
        },
      ],
      crops: [
        { name: "覆膜", background: "lightGreen" },
        { name: "不覆膜", background: "lightGray" },
      ],
    });

    // 生命周期
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });

    //methods

    // return
    return {
      data,
      reduce,
      pointIcon,
      appUpdate,
      locationIcon,
      user,
      organization,
      area_2,
      phone,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.rightContent {
  position: absolute;
  top: 24px;
  right: 24px;
  .icons {
    margin-right: 24px;
    .iconInfo {
      margin-bottom: 8px;
      .icon {
        width: 16px;
        height: 16px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        margin-right: 8px;
      }
      .name {
        font-size: 12px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ebeff5;
        line-height: 16px;
        -webkit-background-clip: text;
      }
    }
  }
  .plantItem{
    width: 48px;
    height: 24px;
    // background: #29A0CC;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bg-blue-1{
    background: #29A0CC;
  }
  .bg-blue-2{
    background: #0856CC;
  }
  .bg-blue-3{
    background: #526ECC;
  }
}
</style>
